<template>
  <view class="content">
    <view class="user-info">
      <image class="avatar" src="../../static/my.png" mode="aspectFill"></image>
      <view class="info">
        <text class="name">{{ userinfo.nickName || "未登录" }}</text>
        <text class="id">ID: {{ userinfo.openId || "请先登录" }}</text>
      </view>

      <view>
        
      </view>
    </view>

    <view class="btn-group">
      <button open-type="getPhoneNumber" @click="getUserProfile">
        一键登录
      </button>
      <button class="logout-btn" @click="logout">退出登录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello",
      code: "",
      userinfo: {
        nickName: "",
        openId: "",
      },
    };
  },
  onLoad() {
    this.login();
  },
  methods: {
    async login() {
      uni.login({
        provider: "weixin",
        univerifyStyle: {
          fullScreen: true,
        },
        success: function (res) {
          console.log(res, "reix");
          if (res.code) {
            this.code = res.code;
            uni.showToast({
              title: "登录",
              duration: 2000,
            });
            // 登录
          } else {
            uni.showToast({
              title: "获取logon_code失败",
              duration: 2000,
            });
            console.log("获取logon_code失败" + res.errMsg);
          }
        },
      });
    },
    // 获取用户信息
    async getUserProfile() {
      uni.getUserProfile({
        desc: "用于完善用户信息",
        success: (res1) => {
          console.log(res1);
          this.userinfo = res1.userInfo;

          uni.showToast({
            icon: "none",
            title: "获取成功",
          });
        },
        fail: (err) => {
          console.log(err);
          uni.showToast({
            icon: "none",
            title: "用户拒绝获取",
          });
        },
      });
      // uni.preLogin({
      // 	provider: 'univerify',
      // 	success(){  //预登录成功
      // 		// 显示一键登录选项
      // 	},
      // 	fail(res){  // 预登录失败
      // 		// 不显示一键登录选项（或置灰）
      //     // 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器
      // 		console.log(res.errCode)
      // 		console.log(res.errMsg)
      // 	}
      // })
    },
    logout() {
      uni.showModal({
        title: "提示",
        content: "确定要退出登录吗?",
        success: (res) => {
          if (res.confirm) {
            this.userinfo = {
              nickName: "",
              openId: "",
            };
            uni.showToast({
              title: "已退出",
              icon: "success",
            });
          }
        },
      });
    },
  },
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100vh;
  background-color: #f5f5f5;
  width: 100%;
  padding-top: 60rpx;
}

.user-info {
  display: flex;
  align-items: center;
  width: 90%;
  margin-bottom: 80rpx;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 30rpx;
}

.info {
  display: flex;
  flex-direction: column;
}

.name {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.id {
  font-size: 28rpx;
  color: #999;
}

.btn-group {
  width: 90%;
}

.logout-btn {
  margin-top: 40rpx;
  background: linear-gradient(135deg, #ff4d4d, #ff7878) !important;
}

button {
  width: 225rpx;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 45rpx;
  background: linear-gradient(135deg, #1e90ff, #00bfff);
  color: white;
  font-size: 32rpx;
  border: none;
  box-shadow: 0 4rpx 12rpx rgba(30, 144, 255, 0.3);
  transition: all 0.3s;
}

button:active {
  transform: scale(0.98);
  box-shadow: 0 2rpx 6rpx rgba(30, 144, 255, 0.3);
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
